import {useState} from 'react'
// import Color_Navbar_container from '../../Color_Navbar/color_Navbar.tsx'
import './WoDeXiaZai.css'
import Year from './Year/year.tsx'

function myDownload() {
const [activeIndex, setActiveIndex] = useState(0);
const handleTabClick = (index:number) => {
  setActiveIndex(index);
}
const tabList = [
  { name: '全部', content:'全部'},
  { name: '广告设计', content: '广告设计'},
  { name: '视频', content: '优惠促销' },
  { name: 'UI设计', content: '活动福利' },
  { name: '电商淘宝', content: '素材上新' },
   { name: 'PPT模板', content:'全部'},
  { name: '背景', content: '广告设计'},
  { name: '元素', content: '优惠促销' },
  { name: '插画', content: '活动福利' },
  { name: '配乐', content: '素材上新' },
   { name: '插画', content:'全部'},
  { name: '音效', content: '广告设计'},
  { name: '装饰·装修', content: '优惠促销' },
  { name: '摄影图', content: '活动福利' },
  { name: '新媒体配图', content: '素材上新' },
];
  return (
    <div className='myDownload_container'>
        {/* <Color_Navbar_container></Color_Navbar_container> */}
        <div className="myDownload_img">
            <img className='myDownload_img_img' src="https://s.ibaotu.com/img/activity/20240830/time2.png" alt="" />
            <img className='myDownload_img_img' src="https://s.ibaotu.com/img/activity/20240830/time1.png" alt="" />
            	
        </div>
        <div className="myDownload_container_tab">
            <div className="myDownload_Top"> 
                <p>分类:</p>
              <ul>
                {tabList.map((tab, index) => (
                  <li key={index} onClick={() => handleTabClick(index)}
                    className={activeIndex === index? 'active' : ''}>
                    {tab.name}
                  </li>
                ))}
              </ul>
            </div>
             <Year></Year>
          <div className="myDownload_bottom">
            {tabList[activeIndex] && <div>{tabList[activeIndex].content}</div>}
          </div>
      </div>
         
    </div>
  )
}

export default myDownload
